<template>
<div class="service-opening">
    <div class="service-opening-nav">
        <div class="top">
            <img src="./img/chat.png" alt="" />
            <ul class="notice_list" :class="noticeList.length > 1 ? { notice_top: animate } : ''">
                <li v-for="(item, index) in noticeList" :key="index">
                    <span>{{ item.content }}</span>
                </li>
            </ul>
        </div>
        <img class="title" src="./img/title.png" alt="" />
        <img class="text" src="./img/text.png" alt="" />
        <div class="bt">
            <img src="./img/op.png" alt="" />
        </div>
    </div>
    <div class="service-opening-giftBag">
        <div class="title">店铺服务礼包</div>
        <div class="info">为感谢您的支持，购买成功后，将赠送以下服务。</div>
        <div class="items-box">
            <div class="item" v-for="(item,index) in giftBagList" :key="index">
                <img :src="`templates/vue_dist/mod-service-opening/img/${index+1}.png`" alt="" />
                <p class="item-title">{{item.name}}</p>
            </div>
            <div class="connect"><span>硬件服务二选一</span></div>
        </div>
        <div class="bottom">
            <img src="./img/icon_left.png" alt="" />
            <span>更多服务将陆续上线，敬请期待...</span>
            <img src="./img/icon_right.png" alt="" />
        </div>
    </div>
    <div class="service-opening-container">
        <ul class="setMeal">
            <li v-for="(item, index) in setMeal" :key="index" @click="selectMeal(item, index)" :class="{ active: item.checked }">
                <p class="month">{{ item.month }}个月</p>
                <p class="money"><span>¥</span>{{ item.price }}</p>
                <p class="unit"><span v-show="item.act_info">折后价</span>{{ item.unitPrice }}元/月</p>
                <p class="old">原价{{ item.origin_price }}元/月</p>
                <p class="flow" v-if="item.sim">4G流量/包年 {{item.sim.money}}元</p>
                <span class="sim" v-if="item.act_info&&item.act_info.discount"><em>{{ item.act_info.discount}}</em></span>
            </li>
        </ul>
        <p class="info">
            <em>*4G流量套餐仅适用于原装流量卡的机型，价格比平时优惠10元</em>
        </p>
        <div class="gift-bag">
            <div class="title">选择服务礼包（2选1）</div>
            <div :class="['content',{error:errorTipBag != ''}]">
                <div class="top">
                    <div :class="['item', { active: item.checked }]" v-for="(item, index) in snTypeList" :key="item.id" @click="selectSnType(item)">
                        <img class="left" src="./img/bag1.png" alt="" v-if="index == 0" />
                        <img class="left" src="./img/bag2.png" alt="" v-else />
                        <div class="right">
                            <p>{{ item.name }}</p>
                        </div>
                    </div>
                </div>
                <p class="info">输入服务的打印机SN号</p>
                <div class="input">
                    <input :class="{ error: errorTip != '' }" type="text" v-model="confirmObj.sn" placeholder="请输入" maxlength="9" @click.stop="showSNlist(1)" oninput="value=value.replace(/[^\d]/g,'')" />
                    <div class="select-menu" v-if="isSNlist && snList && snList.total != 0">
                        <p v-for="item in snList.list" :key="item.id" @click.stop="selectSn(item, 1)">
                            {{ item.sn }}
                        </p>
                    </div>
                </div>
                <p class="info" v-if="flowInputStatus">
                    输入充值流量的打印机SN号<span @click="hideFlowInput()">取消</span>
                </p>
                <div class="input" v-if="flowInputStatus">
                    <input type="text" v-model="confirmObj.sn_sim" placeholder="请输入" maxlength="9" @click.stop="showSNlist(2)" oninput="value=value.replace(/[^\d]/g,'')" />
                    <div class="select-menu" v-if="flowSnListStatus && snList && snList.total != 0">
                        <p v-for="item in snList.list" :key="item.id" @click.stop="selectSn(item, 2)">
                            {{ item.sn }}
                        </p>
                    </div>
                </div>
                <p class="tips" v-if="flowStatus">
                    流量将同时充值到以上打印机，<span @click="showFlowInput()">需要充值到其他打印机？</span>
                </p>
            </div>
        </div>
        <div class="error-tip" v-if="errorTip != ''||errorTipBag!=''">{{ errorTip||errorTipBag }}</div>
        <div class="scroll_bottom"></div>
        <p class="tips">* 注：服务自授权店铺成功时开始计算有效期。</p>
        <div class="service-content">
            <p>套餐服务内容</p>
            <p>1、飞鹅打印云服务,即打印机自动接单，自动打印服务；</p>
            <p>2、飞鹅订单助手店铺管理功能；</p>
            <p>3、“店铺置休”与“预约单设置”功能免费使用；</p>
            <p>4、打印机服务套餐二选一</p>
            <p class="mgl15">
                ① 备用机 <span @click="viewServices(1)">(查看服务详情)</span>
            </p>
            <p class="mgl15">
                ① 延长保修 <span @click="viewServices(2)">(查看服务详情)</span>
            </p>
            <p v-if="confirmObj.id == 3 || confirmObj.id == 4">
                5、12个月流量充值服务 <span @click="viewServices(3)">(查看服务详情)</span>
            </p>
            <p class="mgt5">* 注：以上服务内容生效时间均由所购套餐店铺授权成功时起生效，结束时间与所购套餐店铺授权时长相同；若发生退款，则服务同时失效，请留意。流量一经充值即刻生效，不可退款。</p>
        </div>
    </div>
    <div class="service-opening-bottom" v-show="isOriginHei">
        <div class="agreement-error" v-if="agreementError != ''">
            {{ agreementError }}
        </div>
        <div class="agreement">
            <i @click="
            agreement = !agreement;
            agreementError = '';
          " :class="{ active: agreement }"></i>同意
            <a href="javascript:void(0);" @click="agreementPop = true">《平台授权服务用户协议》</a>
        </div>
        <div class="buy-box">
            <!-- <img class="hidden" src="./img/on_trial.png" alt="" @click="onTrial()" /> -->
            <div class="right">
                <span>总计</span>
                <span>¥{{ price }}</span>
                <span class="btn" @click="confirm()">立即开通</span>
            </div>
        </div>
    </div>
    <Dialog v-if="isDialog" @close="closeDialog()" @confirm="confirmDialog()" :config="dialogConfig"></Dialog>
    <!-- 试用弹窗 -->
    <div class="service-opening-onTrialPop" v-if="isOnTrial">
        <div class="close" @click="closeOnTrial()"></div>
        <div class="btn" @click="confirmOnTrial()"></div>
        <img src="./img/on_trial_pop.png" alt="">
    </div>
    <!-- 协议 -->
    <div class="service-opening-agreementPop" v-if="agreementPop">
        <div class="nav">
            <div class="close" @click="agreementPop = false"></div>
            <p class="title">飞鹅订单助手店铺授权服务协议</p>
        </div>
        <div class="content">
            <pre>
版本更新提示：
于2022年1月1日起，因美团接单规则调整：在接单打印过程中将收取相应的技术服务费用。因此，我司将业务调整为以月套餐优惠+赠送服务的形式为您继续提供接单打印服务，感谢您的支持！

飞鹅订单助手店铺授权服务协议

本版本更新时间：2021年12月15日

欢迎您使用飞鹅订单助手店铺授权服务！

飞鹅订单助手店铺授权服务由广州市大枣科技信息有限公司（以下亦称“大枣”）向您提供，注册地址为：广州市南沙区吉盛路2号202房

《飞鹅订单助手店铺授权服务协议》（以下亦称“本协议”）由您（以下亦称“商家”）和大枣进行缔结，对双方具有同等法律效力。大枣建议您仔细阅读本协议的全部内容，与您的权益（可能）存在重大关系的条款（包括相关约定大枣责任、您享有的权利、争议解决方式及司法管辖等条款），请您留意重点阅读。若您认为本协议中条款可能会导致您的部分或全部权利或利益受损，请您务必再次仔细阅读，在确保您已经理解、接受的前提下，继续使用大枣店铺授权服务。

如果您不同意本协议的任一或全部条款内容，请不要以确认形式（包括但不限于支付行为或完成了授权的全部程序而在此过程中未向大枣提出关于本协议的任何异议）进行立即开通操作或使用大枣店铺授权服务。当您以确认形式进行立即开通操作或使用大枣店铺授权服务时，即表示您与大枣已达成协议关系，您自愿接受本协议并遵守本协议项下的全部约定。

大枣有权变更本协议内容，一旦本协议内容发生变更的，大枣将在相应页面、站内信或以其他合理方式进行通知，请您仔细阅读。如果您不同意变更的内容的，您可以选择停止使用店
铺授权服务。如您继续使用店铺授权服务的，则视为您已经同意变更的全部内容。更新后的协议自文首更新之日起生效。

若您是未成年人，请您在监护人监护、指导下阅读并决定是否同意本协议。

一、服务说明

1.  服务说明

1.1  飞鹅店铺授权服务是指：在购买了店铺授权服务后，在遵守本协议的前提下，授权店铺并在店铺授权有效期内享受店铺对应外卖平台授权店铺进行接单打印服务。请您根据您的需求，开通您所需的套餐，进而享受相应的服务。

1.2  备用机服务是指：购买一次店铺授权服务套餐时选择备用机服务并填写享受服务的打印机，则可获得所购套餐时长对应的备用机服务有效期时长；本服务于所购套餐成功授权店铺时生效；店铺授权有效期使用间，当享受备用机服务的打印机在返厂维修时，可获取一台由我司原厂提供的打印机作为您的店铺临时备用打印机进行使用，需支付相应的押金费用；押金将在退回备用机且保证备用机无损坏后退还。购买一次店铺授权服务可选择获得单次一台备用机服务；若购买多个店铺授权服务，则可叠加单次使用备用机的数量。* 注：服务过程中，若因人为原因造成备用机损坏，则需要支付相应的维修费用，为免造成不必要的损失，请您文明使用设备，切勿损坏设备。

1.3  延长保修期是指：购买一次店铺授权服务套餐时选择延长保修期服务并填写享受服务的打印机，则可获得所购套餐时长对应的打印机延保时长；本服务于所购套餐成功授权店铺时生效；即：购买6个月店铺授权服务套餐并成功授权店铺则对应延长打印机保修时长6个月；购买12个月店铺授权服务套餐并成功授权店铺则对应延长打印机保修时长12个月。
若购买多次店铺授权，并选择本服务，则可选择对不同的打印机延长保修时长，或对单台打印机叠加延长保修时长。
* 注：单台打印机延保时长累计不能超过2年；且在保打印机方可享受延保服务，已过保打印机则不可用，请慎重选择。

1.4  店铺置休服务是指：当您的店铺因接单异常等其他因素造成的店铺被平台方置休时，店铺所绑定的飞鹅打印机将即时自动打印店铺被置休通知小票，并通过您的飞鹅手机账号发送店铺被置休通知短信到您的手机号码。

1.5  预约单设置服务是指：当您的店铺有预约单来单时，通过预约单设置可设置预约单打印时间以及提醒预约单备餐时间，助您有效管理预约单。

2.  服务有效期说明

2.1  服务有效期限的计时方式：您购买的店铺授权服务套餐的服务期限自您购买后成功授权店铺时起算，您可以通过在飞鹅订单助手-外卖平台-店铺列表-店铺信息查看服务使用情况。该服务期限不因您的店铺授权失效而暂停或延长。店铺授权服务期限自当前服务有效周期届满之日终止；当店铺授权服务期限到期后，大枣将停止向您提供店铺所在平台相关的接单打印等相关服务，为避免造成不必要的损失，请及时续费服务。

2.2  服务有效期限的授权限制：服务一旦经过授权店铺操作，则该服务将只对所授权店铺有效，无法授权其他店铺。即：您在购买服务并成功授权店铺后，因在其他非飞鹅订单助手应用的第三方服务商平台抢授店铺授权导致您的飞鹅订单助手账号下店铺授权失效，则本条服务的有效期将保留在您的账号下，该服务不能授权其他店铺 ，您可通过开通服务重新抢授回店铺授权；若您在开通服务的流程中授权了其他店铺，则将以开通服务过程中您所购买的服务为基础生成一条新的店铺信息，但并不会继承旧服务的有效期。

2.3  服务有效期限内服务时长转移：在您的店铺授权有效期内，若有其他账号通过购买店铺授权有效期授权原店铺，则将成功获取授权并将继承店铺原有有效期，新购买的授权时长将自动叠加。而您账号下将失去店铺信息，大枣在此善意的提醒您，请您在使用店铺授权服务时仔细查阅上述协议和规则。

2.4  请您理解，因互联网服务的特殊性，店铺授权服务期限中包含大枣解决故障、服务器维修、调整、升级等处理所需用的合理时间，但大枣会尽可能将影响降至最低。

二、使用服务

1.  服务获取

1.1  大枣飞鹅订单助手店铺授权服务为收费服务，您可以通过支付相应的服务费用购买。

1.2  您在获取大枣飞鹅订单助手店铺授权服务时，应当遵守法律法规、本协议约定，不侵犯大枣的合法权益。您不得自行（或协助他人）通过以下方式获取大枣飞鹅订单助手店铺授权服务：

（1）以商业性或其他非个人使用等目的；

（2）通过机器人软件、蜘蛛软件、爬虫软件等任何自动程序、脚本、软件等方式；

（3）未经大枣允许通过借用、租用、售卖、分享、转让服务的方式；

（4）通过不正当手段或以违反诚实信用原则的方式（如利用规则漏洞、利用系统漏洞、黑色产业、投机等）；

（5）通过利用或破坏大枣店铺授权服务规则的方式。

大枣在此声明：任何未经大枣明示授权而售卖大枣飞鹅订单助手店铺授权资格的行为属于非法销售，大枣有权追究其法律责任。

2.  服务使用的基本原则

2.1  您在使用大枣飞鹅订单助手店铺授权服务的过程中，应遵守法律法规及其他规范性文件，应遵守公共秩序，尊重社会公德，不得危害网络安全，不得利用网络从事危害国家安全、荣誉和利益，煽动颠覆国家政权、推翻社会主义制度，煽动分裂国家、破坏国家统一，宣扬恐怖主义、极端主义，宣扬民族仇恨、民族歧视，传播暴力、淫秽色情信息，编造、传播虚假信息扰乱经济秩序和社会秩序，以及侵害他人名誉、隐私、知识产权和其他合法权益等活动。如您存在上述行为的，大枣有权终止向您提供大枣飞鹅订单助手店铺授权服务。

用户行为

3.  账号管理及安全

3.1  您应自行负责并妥善、正确地保管、使用、维护您的飞鹅订单助手账号和密码，并对您的账号和密码采取必要和有效的保密措施。非大枣法定过错导致的任何遗失、泄露、被篡改、被盗以及其他因保管、使用、维护不当而造成的损失，您应自行承担。

3.2  如果您发现有人未经授权使用了您的账号或您的账号存在其他异常情况导致无法正常登录使用的，则您需要按照大枣官方公布的账号找回流程进行账号找回。在找回过程中，大枣可能会要求您提供相应信息及/或证明资料，请确保您所提供的内容真实有效，否则将可能无法通过大枣的验证而导致找回失败。

3.4  请您特别注意，您的账号下的行为视为您本人的行为，您应对您的账号下发生的活动或通过该账号进行的活动负责。 

4.  使用规范

您在获取、使用大枣店铺授权服务时，应遵循大枣官方渠道公布的流程、平台规范等：

4.1  不得通过未经大枣授权或公布的途径、方式、渠道非法获取大枣店铺绑定服务；

4.2  不得通过不正当手段或以违反诚实信用原则的方式（如利用规则漏洞、利用系统漏洞、滥用店铺授权服务、黑色产业、投机等违背大枣提供服务/举办活动的初衷的方式）参与活动或者获取福利。

若您违反上述约定，则大枣有权对您所获得的福利作出删除、取消、清零等处理，且有权终止向您提供服务，由此造成的全部损失由您自行承担。

三、收费

1.  收费方式

大枣店铺授权服务为收费服务，您可通过大枣实际支持的付费方式完成大枣店铺授权费用，例，当前仅支持微信支付。

2.  计费周期：按月计算，即以月为计费周期单位。

3.  费用退还

大枣店铺授权服务系网络商品和虚拟商品，店铺授权服务费用是您所购买的店铺授权服务所对应的网络商品价格，而非预付款或者存款、定金、储蓄卡等性质，大枣店铺授权服务若需退款请走退款大枣官方提供的申请流程。

大枣在此特别提醒您，您在购买大枣店铺授权服务（包括续费服务）之前应仔细核对账号信息、店铺信息、购买的服务内容、价格、服务期限等信息。

退款成功后将失去所购服务内容：店铺授权服务、所选硬件服务、店铺置休服务。
失去店铺授权则在飞鹅订单助手内将无法继续接单打印。

退款情况特殊说明：
① 若您在某月31号购买，到期月份若没有31号，则将该月份实际最后一天日期到期；
例如，若服务有效期在2月底到期，则将在2月实际月最后一天到期；即若2月最后一天为2月28日则在2月28日到期；若2月最后一天为2月29日则在2月29日到期；
② 流量充值服务一经充值，无法变更，无法退款。

4.  收费标准、方式的变更

大枣店铺授权服务（包括续费）收费标准由大枣根据公司的运营成本、运营策略等综合考虑后独立决定（调整包括但不限于促销、涨价等），并在相关的产品服务宣传及支付页面向您展示；若您在购买和续费时，相关收费方式发生变化的，以大枣实际支持的收费方式为准；相关服务的价格发生了调整的，应以大枣平台上公示的现时有效的价格为准（但大枣与您另有约定的情形除外）。

四、您的行为规范和违约处理

1.  在您使用大枣店铺授权服务的过程中，不得存在以下行为：

1.1  未经大枣明确授权，通过技术手段对服务内容、服务期限、消费金额、交易状态等信息进行修改；

1.2  将大枣店铺授权服务通过非大枣明确授权的方式（包括但不限于借用、租用、售卖、分享、转让）提供他人使用；

1.3  对大枣用于保护大枣店铺授权服务的任何安全措施技术进行破解、更改、反操作、篡改或其他破坏；

1.4  其他未经大枣明示授权许可或违反本协议、法律法规或监管政策、侵犯大枣合法权益的行为。

2.  您知悉并同意，如您存在任何违反国家法律法规或监管政策、违反本协议或有损大枣的声誉、利益的行为的，大枣有权采取以下一项或多项处理措施：

2.1  如本协议对此行为有单独条款约定处理方式的，按照该条款处理；

2.2  采取一种或多种措施制止您的行为及行为产生的后果，如删除/屏蔽相关链接或内容、限制/取消您的账号/账户使用权限等；

2.3  中断或终止部分或全部大枣店铺授权服务，且您已交纳的大枣店铺授权服务费用将不予退还且不获得任何形式的补偿/赔偿；

2.4  如您的行为使大枣遭受任何损失的，您应当承担全部损失赔偿责任并在大枣要求的时限内完成费用支付。 

五、服务的中断和终止 

1.  本服务的中断或终止包括如下情况：

1.1  您主动提出要求的；

1.2  您存在任何违反国家法律法规或监管政策、违反本协议或有损大枣或的声誉、利益的行为的；

1.3  大枣根据法律法规、监管政策的规定或有权机关的要求；

1.4  大枣为维护账号与系统安全等紧急情况之需要；

1.5  不可抗力（不可抗力是指：不能预见、不能避免且不能客服的客观情况，包括国家法律、法规、政策及国家机关的命令及其他政府行为或者其它的诸如台风、洪水、地震、海啸、战争、罢工等）；

1.6  其他大枣无法抗拒的情况。

2.  当发生前述终止的情况时，大枣将根据法律法规的规定与您就本服务的中断或终止事宜进行处理。

六、通知

为便于您获知与本协议和大枣店铺授权服务相关的信息，您同意大枣有权通过网页公示、页面提示、弹窗、消息通知、公众号通知、站内信、您预留的联系方式（如手机短信、电子邮件等）等一种或多种方式进行通知，该通知自大枣发送之时视为已成功送达您。如多种通知方式并存的，则送达时间以上述方式中最早发送之时为准。

此类通知的内容或将对您产生重大有利或不利影响，请您务必确保联系方式为有效并请及时关注相应通知。

七、联系大枣

如您对本协议或使用大枣店铺授权服务的过程中有任何问题（包括问题咨询、投诉等），大枣专门为您提供了多种反馈通道，希望为您提供满意的解决方案：

在线客服/其他在线意见反馈通道：您可与大枣平台上产品功能页面的在线客服联系或者在线提交意见反馈；

人工客服通道：您可以拨打大枣的任何一部客服电话与大枣联系；

其他方式：大枣提供的其他反馈通道。

我们会在收到您的反馈后尽快向您答复。

八、  其他

1.  本协议的生效、履行、解释及争议的解决均适用中华人民共和国法律。

2.  如就本协议的签订、履行等发生任何争议的，双方应尽量友好协商解决；协商不成时，任何一方均可向被告住所地享有管辖权的人民法院提起诉讼。

3.  如本协议因与中华人民共和国现行法律相抵触而导致部分无效的，不影响协议的其他部分的效力。

4.  本协议的标题仅为方便及阅读而设，并不影响正文中任何条款的含义或解释。
            </pre>
        </div>
    </div>
    <!-- 客服 -->
    <a class="service-opening-customer" href="https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzI0MTcxNzE5OQ==&scene=124#wechat_redirect">
        <img src="./img/customer_service.png" alt="">
        <span>客服</span>
    </a>
</div>
</template>

<script>
import request from "@util/request";
import {
    noticeList
} from "./config/index.js";
import {
    apiUrl,
    getRequest
} from "@util/index";
import qs from "qs";
import Dialog from "@com/Dialog/index.vue";
export default {
    data() {
        return {
            param: {},
            noticeList, //顶部滚动通知列表
            animate: false, //动画
            setMeal: [], //套餐列表
            snTypeList: [{
                    name: "备用机服务",
                    checked: false,
                    id: 1,
                },
                {
                    name: "延长打印机保修",
                    checked: false,
                    id: 2,
                },
            ],
            giftBagList: [{
                name: "备用机服务"
            }, {
                name: "延长保修"
            }, {
                name: "店铺置休提醒"
            }, {
                name: "自动接单打印"
            }, {
                name: "店铺管理"
            }, {
                name: "预约打印"
            }],
            confirmObj: {
                action: "ShopService_buyService",
                id: "", //0试用，如此类推
                pid: 2, //2=>美团 1=>饿了吗
                sn: "", //打印机编号
                sn_sim: "", //流量充值打印机编号
                sn_type: "", //1备用机 2延长保修
            },
            agreement: false, //是否选中同意协议
            flowStatus: false, //是否展示流量提示
            flowInputStatus: false, //是否展示流量sn的input标签
            isSNlist: false, //是否显示sn列表
            snList: null, //SN列表
            flowSnListStatus: false, //是否显示流量sn列表
            viewServicesData: null, //查看服务详情弹窗数据
            isDialog: false, //弹窗
            dialogConfig: null, //弹窗数据
            price: 0, //价格显示
            errorTip: "", //错误提示
            errorTipBag: "", //套餐的错误提示
            agreementError: "",
            isOriginHei: true,
            screenHeight: window.innerHeight ||
                document.documentElement.clientHeight ||
                document.body.clientHeight,
            originHeight: window.innerHeight ||
                document.documentElement.clientHeight ||
                document.body.clientHeight,
            isOnTrial: false, //是否点击试用按钮
            clickConfirm: true,
            agreementPop: false,
        };
    },
    components: {
        Dialog,
    },
    watch: {
        screenHeight(val) {
            if (this.originHeight != val) {
                this.isOriginHei = false;
                document.querySelector(".scroll_bottom").scrollIntoView({
                    block: "center",
                });
            } else {
                this.isOriginHei = true;
            }
        },
    },
    methods: {
        closeOnTrial() {
            this.isOnTrial = false
        },
        confirmOnTrial() {
            this.confirmObj.id = 0;
            this.confirm();
        },
        // 试用按钮
        onTrial() {
            if (!this.agreement) {
                this.agreementError = "请先勾选同意协议";
                return;
            }
            this.isOnTrial = true;
        },
        buyConfirm() {
            localStorage.removeItem("orderId");
            window.location.href = `tenPayShopBuy.php?action=${this.confirmObj.action}&id=${this.confirmObj.id}&pid=${this.confirmObj.pid}&sn=${this.confirmObj.sn}&sn_sim=${this.confirmObj.sn_sim}&sn_type=${this.confirmObj.sn_type}&epoid=${this.param.epoid}&is_renewal=${this.param.is_renewal}&from_type=${this.param.from_type}&uid=${this.param.uid}&price=${this.price}`;
        },
        // 立即开通按钮逻辑
        confirm() {
            if (!this.isOnTrial) {
                if (this.verification()) {
                    if (this.clickConfirm) {
                        this.isBuyNums()
                    } else {
                        this.buyConfirm()
                    }
                }
            } else {
                // 免费试用
                let {
                    sn_sim,
                    sn,
                    sn_type,
                    ...newConfirm
                } = this.confirmObj;
                request({
                    method: "POST",
                    headers: {
                        "Content-Type": "application/x-www-form-urlencoded",
                    },
                    url: apiUrl,
                    data: newConfirm,
                    transformRequest: [
                        function (data) {
                            return qs.stringify(data);
                        },
                    ],
                }).then((res) => {
                    let _data = res.data;
                    if (_data.ret == 0) {
                        localStorage.setItem("orderId", _data.data.orderId);
                        // 免费试用跳转到登录页
                        window.location.href =
                            "gotoBind2.php?buyOrderId=" + _data.data.orderId;
                    } else {
                        alert(_data.ret.msg);
                    }
                });
            }
        },
        // 验证数据
        verification() {
            let flag = true;
            if (this.confirmObj.sn_type == "") {
                this.errorTipBag = "请选择打印机服务套餐！";
                this.$nextTick(() => {
                    document.querySelector(".error-tip").scrollIntoView({
                        block: "center",
                    });
                });
                flag = false;
                return
            } else if (this.confirmObj.sn == "") {
                this.errorTip = "请输入打印机SN号！";
                this.$nextTick(() => {
                    document.querySelector(".error-tip").scrollIntoView({
                        block: "center",
                    });
                });
                flag = false;
                return
            } else if (!this.agreement) {
                this.agreementError = "请先勾选同意协议";
                flag = false;
            }
            return flag;
        },
        // 查看服务详情
        viewServices(type) {
            this.isDialog = true;
            let kg = "&nbsp;&nbsp;&nbsp;&nbsp;"
            if (type == 1) {
                this.dialogConfig = {
                    title: "备用机服务说明",
                    details: `
                    <p>${kg}购买一次店铺授权服务则可选择获得单次一台备用机服务；若购买多个店铺授权服务，则可叠加单次使用备用机的数量。备用机服务有效期时长对应所购套餐时长；</p>
                    <p>${kg}1、什么是备用机服务？</p>
                    <p>${kg}备用机服务是指所填打印机在返厂维修时，可申请获取一台由我司原厂提供的打印机作为您的店铺临时备用打印机进行使用，需支付相应的押金费用，押金将在退回备用机后退还。</p>
                    <p>${kg}2、备用机服务期限？</p>
                    <p>${kg}备用机服务有效期以所属套餐成功授权店铺起计算开始时间，到店铺有效期服务周期终止时间终止。备用机服务时长根据用户所购套餐时长对应服务时长；若用户申请退款，则备用机服务时长将根据用户退款信息对应缩减。</p>
                    <p class='red'>* 注：服务过程中，若因人为原因造成备用机损坏，则需要支付相应的维修费用，为免造成不必要的损失，请您文明使用设备，切勿损坏设备。</p>
                    `,
                    confirm: "知道了",
                };
            } else if (type == 2) {
                this.dialogConfig = {
                    title: "延长打印机保修服务说明",
                    details: `
                    <p>${kg}购买一次店铺授权服务则可选择获得所购套餐时长对应的打印机延保时长；即：购买6个月套餐则对应延长打印机保修时长6个月；购买12个月套餐则对应延长打印机保修时长12个月。</p>
                    <p>${kg}若购买多次店铺授权，并选择本服务，则可选择对不同的打印机延长保修时长，或对单台打印机叠加延长保修时长。</p>
                    <p>${kg}1、打印机延保服务有效期限？</p>
                    <p>${kg}打印机延保服务有效期以所属套餐成功授权店铺起计算开始时间，到店铺有效期服务周期终止时间终止。打印机延保服务时长根据用户所购套餐时长对应服务时长；若用户申请退款，则打印机延保服务时长将根据用户退款信息对应缩减。</p>
                    <p class='red'>* 注：单台打印机延保时长累计不能超过2年；且在保打印机方可享受延保服务，已过保打印机则不可用，请慎重选择。</p>`,
                    confirm: "知道了",
                };
            } else {
                this.dialogConfig = {
                    title: "12个月流量服务说明",
                    details: "流量充值服务购买后，系统将在所属套餐成功授权店铺后自动充值到您填写的打印机对应出厂配置飞鹅原装流量卡；请确保提交的打印机当前所用流量卡为飞鹅原装流量卡；非飞鹅原装流量卡将不能享受本条服务；流量一经充值即刻生效，不可退款。",
                    confirm: "知道了",
                };
            }
        },
        confirmDialog() {
            this.confirmObj.id == "";
            this.isOnTrial = false;
            this.closeDialog();
        },
        closeDialog() {
            this.isDialog = false;
        },
        // 选中服务礼包
        selectSnType(item) {
            this.confirmObj.sn_type = item.id;
            this.snTypeList.map((_item) => {
                if (_item.id == item.id) {
                    _item.checked = true;
                } else {
                    _item.checked = false;
                }
            });
            this.errorTipBag = ""
        },
        // 选中sn列表中的项
        selectSn(item, type) {
            // type 1=>授权sn列表 2=>流量sn列表
            if (type == 1) {
                this.isSNlist = false;
                this.confirmObj.sn = item.sn;
            } else {
                this.confirmObj.sn_sim = item.sn;
                this.flowSnListStatus = false;
            }
        },
        // 是否显示sn列表
        showSNlist(type) {
            // type 1=>授权sn列表 2=>流量sn列表
            if (type == 1) {
                this.isSNlist = !this.isSNlist;
            } else {
                this.flowSnListStatus = !this.flowSnListStatus;
            }
            this.errorTip = "";
        },
        // 隐藏输入充值流量的sn号
        hideFlowInput() {
            this.flowInputStatus = false;
            this.flowStatus = true;
            this.confirmObj.sn_sim = "";
        },
        // 顶部滚动通知
        showNotice() {
            let t = this;
            t.animate = true;
            setTimeout(() => {
                t.noticeList.push(t.noticeList[0]);
                t.noticeList.shift();
                t.animate = false;
            }, 500);
        },
        // 选中套餐的逻辑
        selectMeal(_item, _index) {
            this.setMeal.map((item, index) => {
                if (index == _index) {
                    item.checked = true;
                } else {
                    item.checked = false;
                }
            });
            this.confirmObj.id = _item.id;
            this.price = _item.price;
            if (_item.sim) {
                if (this.flowInputStatus) return;
                this.flowStatus = true;
            } else {
                this.flowStatus = false;
                this.flowInputStatus = false;
            }
        },
        // 显示输入充值流量的sn号
        showFlowInput() {
            this.flowInputStatus = true;
            this.flowStatus = false;
        },
        // 初始化列表
        initListArr(data) {
            let arr = [];
            for (const key in data) {
                console.error(key);
                if (Object.hasOwnProperty.call(data, key)) {
                    if (!data[key].key) {
                        data[key].key = key;
                    }
                    arr.push(data[key]);
                }
            }
            return arr;
        },
        // 初始化套餐选择列表
        initSetMeal() {
            let _data = {
                action: "ShopService_getFee",
                pid: "2",
                is_renewal: this.param.is_renewal ? this.param.is_renewal : 0
            }
            if (this.param.epoid) {
                _data.epoid = this.param.epoid
            }
            if (this.param.uid) {
                _data.uid = this.param.uid
            } else {
                _data.uid = window.currentUserId
            }
            request({
                method: "POST",
                url: apiUrl,
                headers: {
                    "Content-Type": "application/x-www-form-urlencoded",
                },
                data: _data,
                transformRequest: [
                    function (data) {
                        return qs.stringify(data);
                    },
                ],
            }).then((res) => {
                let _data = res.data;
                if (_data.ret == 0) {
                    let arr = _data.data.prod_list
                    arr.map((item, index) => {
                        // 打折价格
                        if (item.act_info) {
                            item.price = (+item.act_info.price).toFixed(2)
                        } else {
                            item.price = (+item.service_money).toFixed(2)
                        }
                        // 流量价格
                        if (item.sim) {
                            item.price = (+item.price + +item.sim.money).toFixed(2)
                        }
                        // 每月多少钱
                        if ((item.price / item.month).toFixed(2) <= 0) {
                            item.unitPrice = 0;
                        } else {
                            // 有活动
                            if (item.act_info) {
                                item.unitPrice = (item.act_info.price / item.month).toFixed(2);
                            } else {
                                // 无活动
                                item.unitPrice = (item.service_money / item.month).toFixed(2);
                            }
                        }
                        // 默认选中第一项
                        if (index == 0) {
                            item.checked = true;
                            this.price = item.price;
                            this.confirmObj.id = item.id;
                        } else {
                            item.checked = false;
                        }
                    });
                    this.setMeal = arr;
                }
            });
        },
        // 获取sn列表
        initSnList() {
            let data = {
                method: "POST",
                url: apiUrl,
                headers: {
                    "Content-Type": "application/x-www-form-urlencoded",
                },
                data: {
                    action: "ShopService_getPrintListByUid",
                },
                transformRequest: [
                    function (data) {
                        return qs.stringify(data);
                    },
                ],
            };
            if (this.param.uid != "") {
                data.data.uid = this.param.uid;
            }
            if (this.param.sn) {
                this.confirmObj.sn = this.param.sn;
            }
            request(data).then((res) => {
                let _data = res.data;
                if (_data.ret == 0) {
                    let arr = this.initListArr(_data.data);
                    this.snList = {
                        list: arr,
                        total: _data.data.total,
                    };
                }
            });
        },
        getUid() {
            if (this.param.is_renewal && this.param.is_renewal == 1) {
                let data = {
                    method: "POST",
                    url: apiUrl,
                    headers: {
                        "Content-Type": "application/x-www-form-urlencoded",
                    },
                    data: {
                        action: "ShopService_getShopInfoByEpoId",
                        epoid: this.param.epoid,
                        pid: 2,
                    },
                    transformRequest: [
                        function (data) {
                            return qs.stringify(data);
                        },
                    ],
                };
                request(data).then((res) => {
                    let _data = res.data;
                    if (_data.ret == 0) {
                        this.param.uid = _data.data.uid;
                        //uid是否等于当前id
                        if (window.currentUserId == this.param.uid) {
                            this.initSnList();
                        }
                        this.initSetMeal()
                    }
                });
            } else {
                this.initSnList();
                this.initSetMeal()
            }
        },
        // 初始化顶部滚动动画及键盘弹起优化
        initPage() {
            setInterval(this.showNotice, 2000);
            window.onresize = () => {
                return (() => {
                    this.screenHeight =
                        window.innnerHeight ||
                        document.documentElement.clientHeight ||
                        document.body.clientHeight;
                })();
            };
            this.$nextTick(() => {
                document.addEventListener("click", (e) => {
                    if (!e.target.classList.contains("input")) {
                        this.isSNlist = false;
                        this.flowSnListStatus = false
                    }
                });
            });
        },
        // 查询已购买的数量判断
        isBuyNums() {
            this.clickConfirm = false;
            request({
                method: "post",
                url: apiUrl,
                data: {
                    action: "ShopService_getNoPrivilegedCount",
                    pid: "2",
                },
                transformRequest: [
                    function (data) {
                        return qs.stringify(data);
                    },
                ],
            }).then((res) => {
                let _data = res.data;
                if (_data.ret == 0) {
                    if (_data.data > 0) {
                        this.dialogConfig = {
                            title: "温馨提示",
                            details: "您有已购服务暂未授权店铺，请及时前往店铺列表进行授权，以免造成不必要的损失。",
                            confirm: "知道了",
                        };
                        this.isDialog = true;
                    } else {
                        this.buyConfirm()
                    }

                }
            });
        },
    },
    mounted() {
        this.param = getRequest();
        this.getUid();
        this.initPage();
    },
};
</script>

<style lang="less">
@import "index.less";
</style>
